<template>
  <div>
    <div class="box">
      <van-row>
        <van-col span="8"><van-icon name="arrow-left" /></van-col>
        <van-col span="12">客户详情</van-col>
        <van-col span="4" class="box-1"
          ><img src="../assets/我的客户/系统功能.png" alt=""
        /></van-col>
      </van-row>
      <van-row class="box-3">
        <van-col class="box-4" span="8"
          ><img src="../assets/我的客户/头像.png" alt=""
        /></van-col>
        <van-col span="8">{{custName}}</van-col>
        <van-col span="8" class="box-1"
          ><van-button round type="info" @click="$router.push(`/custbjzl?id=${$route.query.id}`)">编辑资料</van-button></van-col
        >
      </van-row>
      <div class="box-5">
        <van-col span="4"
          ><img src="../assets/我的客户/基本信息.png" alt=""
        /></van-col>
        <van-col span="20">基本信息</van-col>
      </div>
    </div>
    <div class="box-7">
     <ul>
         <li>客户名称</li>
         <li>{{custName}}</li>
     </ul>
      <ul>
         <li>联系电话</li>
         <li>{{telephone}}</li>
     </ul>
      <ul>
         <li>学历</li>
         <li>{{education}}</li>
     </ul>
      <ul>
         <li>性别</li>
         <li>{{sex}}</li>
     </ul>
      <ul>
         <li>年龄</li>
         <li>{{age}}</li>
     </ul>
      <ul>
         <li>所属城市</li>
         <li>{{cityName}}</li>
     </ul>
      <ul>
         <li>公司名称</li>
         <li>{{company}}</li>
     </ul>
      <ul>
         <li>职位</li>
         <li>{{position}}</li>
     </ul>
      <ul>
         <li>录入时间</li>
         <li>{{createTime}}</li>
     </ul>
    </div>
  </div>

  <!-- 

createTime	string	true	创建时间
age	number	true	年龄
sex	string	true	性别
education	string	true	学历
telephone	string	true	电话
position	string	true	岗位
company	string	true	公司名称
cityName	string	true	所属城市
custName	string	true	客户名称
id	string	true	id

   -->
</template>

<script>
import {CustgetidData} from '../request/api'
export default {
  data() {
    return {
        custName:'',
        telephone:'',
        education:'',
        sex:'',
        age:'',
        cityName:'',
        company:'',
        position:'',
        createTime:''
    };
  },
  created(){
      CustgetidData({
          id:this.$route.query.id
      }).then(res=>{
          let {custName,telephone,education,sex,age,cityName,company,position,createTime}=res.data
          this.custName=custName
          this.telephone=telephone
          this.education=education
          this.sex=sex
          this.age=age
          this.cityName=cityName
          this.company=company
          this.position=position
          this.createTime=createTime
      })
  }
};
</script>
 
<style lang = "less" scoped>
.box {
  width: 100%;
  height: 200px;
  background-color: blue;
  padding: 10px;
  .box-1 {
    img {
      width: 30px;
      height: 30px;
    }
  }
}
.box-3 {
  line-height: 70px;
  .box-4 {
    text-align: right;
    padding-right: 10px;
  }
  img {
    width: 70px;
    height: 70px;
  }
}
.box-5 {
  background-color: #fff;
  width: 80%;
  height: 50px;
  border-radius: 10px 10px 0 0;
  margin-left: 25px;
  margin-top: 27px;
  line-height: 50px;
  img {
    width: 30px;
    height: 30px;
    margin-top: 10px;
    margin-left: 10px;
  }
}
.box-7{
    padding: 20px;
    ul{
        display: flex;
        li{
            margin-left: 10px;
            line-height: 30px;
        }
    }
}
</style>